<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Grunt: JavaScript世界的构建工具 -- Grunt中文网</title>
    <meta name="description" content="Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。Grunt拥有数量庞大的插件，几乎任何你所要做的事情都可以用Grunt实现。">
    <meta name="keywords" content="Grunt, Gruntjs, 项目构建工具, web前端开发, HTML,CSS,JavaScript">
    <link rel="stylesheet" href="/css/main.css">
    <!--link(rel='stylesheet', href='http://fonts.googleapis.com/css?family=Lato:400,700')-->
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
    <!--link(href='/rss', rel='alternate', title='Grunt Blog Feed', type='application/atom+xml')-->
    <script src="http://cdn.bootcss.com/modernizr/2.7.1/modernizr.min.js"></script>
</head>
<body class="page-index">
<div class="navbar navbar-inverse">
    <div class="navbar-inner">
        <div class="container"><a href="/" class="brand"><span class="logo"></span></a>

            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="/getting-started"><i class="icon-arrow-right"></i><span>快速入门</span></a></li>
                    <li><a href="/plugins"><i class="icon-power-cord"></i><span>插件列表</span></a></li>
                    <li><a href="/getting-started"><i class="icon-document-alt-stroke"></i><span>中文文档</span></a></li>
                    <li><a href="/api"><i class="icon-cog"></i><span>API</span></a></li>
                </ul>
                <form class="navbar-search pull-right"><input type="text" placeholder="Search" class="search-query">
                </form>
            </div>
            <!--.nav-collapse--></div>
    </div>
</div>
<div class="content">
    <div class="container">
        <div class="row-fluid">
            <div class="span9 page">
                <div class="hero-unit">
                    <div class="home-header">
                        <div class="title-header"><span class="grunt-name">Grunt</span><span class="tag-line">JavaScript 世界的构建工具</span>
                        </div>
                    </div>
                    <div class="why left"><h2>为何要用构建工具？</h2>

                        <p>一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 <a
                                href="/sample-gruntfile">Gruntfile</a> 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。</p></div>
                    <div class="why right"><h2>为什么要使用Grunt？</h2>

                        <p>
                            Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个Grunt插件，然后将其发布到npm上吧。先看看<a
                                href="/getting-started">入门文档</a>吧。</p></div>
                    <div class="technology"><h2>可用的Grunt插件</h2>

                        <p>你所需要的大多数task都已经作为Grunt插件被开发了出来，并且每天都有更多的插件诞生。<a href="/plugins">插件列表</a>页面列出了完整的清单。下面给出几个你可能听说过的插件：
                        </p>

                        <div><a href="https://www.npmjs.com/package/grunt-contrib-coffee" class="technology"><span
                                class="logo"><img src="/img/logo-coffeescript.jpg" alt="CoffeeScript"></span></a><a
                                href="https://www.npmjs.com/package/grunt-contrib-handlebars" class="technology"><span
                                class="logo"><img src="/img/logo-handlebars.jpg" alt="Handlebars"></span></a><a
                                href="https://www.npmjs.com/package/grunt-contrib-jade" class="technology"><span
                                class="logo"><img src="/img/logo-jade.jpg" alt="Jade"></span></a><a
                                href="https://www.npmjs.com/package/grunt-contrib-jshint" class="technology"><span
                                class="logo"><img src="/img/logo-jshint.jpg" alt="JSHint"></span></a><a
                                href="https://www.npmjs.com/package/grunt-contrib-less" class="technology"><span
                                class="logo"><img src="/img/logo-less.jpg" alt="Less"></span></a><a
                                href="https://www.npmjs.com/package/grunt-contrib-requirejs" class="technology"><span
                                class="logo"><img src="/img/logo-requirejs.jpg" alt="Require.js"></span></a><a
                                href="https://www.npmjs.com/package/grunt-contrib-sass" class="technology"><span
                                class="logo"><img src="/img/logo-sass.jpg" alt="Sass"></span></a><a
                                href="https://www.npmjs.com/package/grunt-contrib-stylus" class="technology"><span
                                class="logo"><img src="/img/logo-sylus.jpg" alt="Stylus"></span></a></div>
                    </div>
                    <div class="grunt-preview"><h2>提前感受一下 Grunt 吧！</h2>

                        <p>安装 grunt 虽然很简单，更多涉及到如何运行项目。看看下面的演示，这是为<a href="https://github.com/cowboy/jquery-tiny-pubsub">项目案例</a>运行
                            grunt 后的输出。</p><!-- THX 2 @GF3 4 THE CSS <3!!--><pre class="terminal"><span
                                class="command-prompt">grunt</span>
Running "jshint:gruntfile" (jshint) task
<span class="green">&gt;&gt;</span> 1 file lint free.
 
Running "jshint:src" (jshint) task
<span class="green">&gt;&gt;</span> 1 file lint free.
 
Running "jshint:test" (jshint) task
<span class="green">&gt;&gt;</span> 1 file lint free.
 
Running "qunit:files" (qunit) task
Testing test/tiny-pubsub.html....<span class="green">OK</span>
<span class="green">&gt;&gt;</span> 4 assertions passed (23ms)
 
Running "clean:files" (clean) task
Cleaning "dist"...<span class="green">OK</span>
 
Running "concat:dist" (concat) task
File "dist/ba-tiny-pubsub.js" created.
 
Running "uglify:dist" (uglify) task
File "dist/ba-tiny-pubsub.min.js" created.
Uncompressed size: <span class="green">389</span> bytes.
Compressed size: <span class="green">119</span> bytes gzipped (<span class="green">185</span> bytes minified).
 
<span class="green">Done, without errors.</span>
 
<span class="command-prompt active"><span class="active-prompt"></span></span></pre>
                    </div>
                    <div class="who-uses-grunt"><h2>谁在使用Grunt？</h2>

                        <p>以下列出了一部分正在使用Grunt的公司或项目。 <a href="/who-uses-grunt">查看更多。</a></p>

                        <div><a href="/who-uses-grunt" class="technology"><span class="logo"><img
                                src="/img/logo-twitter.jpg" alt="Twitter"></span></a><a href="/who-uses-grunt"
                                                                                        class="technology"><span
                                class="logo"><img src="/img/logo-jquery.jpg" alt="jQuery"></span></a><a
                                href="/who-uses-grunt" class="technology"><span class="logo"><img
                                src="/img/logo-adobe.jpg" alt="Adobe"></span></a><a href="/who-uses-grunt"
                                                                                    class="technology"><span
                                class="logo"><img src="/img/logo-modernizr.jpg" alt="Modernizr"></span></a><a
                                href="/who-uses-grunt" class="technology"><span class="logo"><img
                                src="/img/logo-bocoup.jpg" alt="Bocoup"></span></a><a href="/who-uses-grunt"
                                                                                      class="technology"><span
                                class="logo"><img src="/img/logo-fg.jpg" alt="Filament Group"></span></a><a
                                href="/who-uses-grunt" class="technology"><span class="logo"><img
                                src="/img/logo-saucelabs.jpg" alt="Sauce Labs"></span></a><a href="/who-uses-grunt"
                                                                                             class="technology"><span
                                class="logo"><img src="/img/logo-bitovi.jpg" alt="Bitovi"></span></a></div>
                    </div>
                    <div class="how-get-started"><h2>如何开始使用Grunt？</h2>

                        <p><a href="/getting-started">快速入门</a> 文档能告诉你如何在项目中使用 Grunt。当你读完了此文档，请继续阅读 <a
                                href="/sample-gruntfile">Gruntfile案例</a> 和 <a href="/configuring-tasks">配置任务</a>.</p>
                    </div>
                </div>
            </div>
            <div class="span3">
                <div class="well sidebar-nav">
                    <div class="latest-version"><h3>最新版本</h3>
                        <ul>
                            <li>稳定版: <a href="https://www.npmjs.org/package/grunt">v0.4.5</a><span> (npm)</span></li>
                            <li>开发版: <a href="https://github.com/gruntjs/grunt">v0.4.6</a><span> (github)</span></li>
                        </ul>
                    </div>
                    <!--include blocks/advertisements-->
                    <div class="latest-news"><h3>最新消息</h3>
                        <ul>
                            <li><a href="/blog/2014-05-12-grunt-0.4.5-released"><span class="title"> Grunt 0.4.5 released</span><span
                                    class="date">May 12, 2014</span></a></li>
                            <li><a href="/blog/2014-03-14-grunt-0.4.4-released"><span class="title"> Grunt 0.4.4 released</span><span
                                    class="date">March 14, 2014</span></a></li>
                            <li><a href="/blog/2014-03-07-grunt-0.4.3-released"><span class="title"> Grunt 0.4.3 released</span><span
                                    class="date">March 07, 2014</span></a></li>
                        </ul>
                    </div>
                    <div class="getting-started"><h3>快速入门</h3>

                        <p><a href="/getting-started">快速入门</a> 文档能告诉你如何在项目中使用 Grunt。当你读完了此文档，请继续阅读 <a
                                href="/sample-gruntfile">Gruntfile案例</a> 和 <a href="/configuring-tasks">配置任务</a>.</p>
                    </div>
                    <div class="social"><a href="https://github.com/gruntjs/" alt="Grunt on GitHub" class="github"><span
                            class="icon-github"></span></a><a href="https://twitter.com/gruntjs/" alt="Grunt on Twitter"
                                                              class="twitter"><span class="icon-twitter"></span></a><a
                            href="/rss" alt="Grunt blog RSS feed" class="feed"><span class="icon-feed"></span></a></div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="grunt-footer">
    <div class="inner">
        <div class="container">
            <ul class="pull-right"><!--li<a href="/blog">博客</a>-->
                <li><a href="/upgrading-from-0.3-to-0.4">升级指南</a></li>
                <li><a href="/contributing">贡献</a></li>
                <li class="social"><a href="https://github.com/gruntjs/" alt="Grunt on GitHub"><span
                        class="icon-github"></span></a></li>
                <!--li.social<a href="https://twitter.com/gruntjs/" alt="Grunt on Twitter"><span class="icon-twitter"></span></a>-->
                <!--li.social<a href="/rss" alt="Grunt blog RSS feed"><span class="icon-feed"></span></a>--></ul>
            <ul class="pull-left">
                <li>Grunt development is sponsored by <a href="http://bocoup.com/" alt="Bocoup">Bocoup</a></li>
                <li>&nbsp;&nbsp;|&nbsp;&nbsp; </li>
                <li>Grunt中文文档由<a href="http://www.bootcss.com/" alt="Bootstrap中文网" target="_blank">Bootstrap中文网</a>整理
                </li>
            </ul>
        </div>
    </div>
</footer>
<script>var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F9630d143ce27a7b287648e78370a3186' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>